<template>
  <div class="w-full h-full flex flex-col">
    <div class="flex justify-around mb-[10px]" v-if="topAll.length > 0">
      <div class=" text-[10px]" style="color: #007397;" v-for="(item, index) in topAll" :key="index">{{ item.name
      }}：{{ item.value }}</div>
    </div>
    <div ref="target" class="flex-1"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  xData: {
    type: Array,
    required: true
  },
  yData: {
    type: Array,
    required: true
  },
  title: {
    type: String,
    default: ''
  },
  subtext: {
    type: String,
    default: ''
  },
  topAll: {
    type: Array,
    default: () => []
  },
  markline: {
    type: Object,
    default: () => { }
  }
})

// 获取 dom 实例
const target = ref(null)

// echarts 实例变量
let mChart = null
// 在 mounted 生命周期之后，实例化 echarts
onMounted(() => {
  mChart = echarts.init(target.value)
  // 渲染 echarts
  renderChart()

  window.addEventListener('resize', screenAdapter)

})



const screenAdapter = () => {
  if (mChart) {
    mChart.resize()
  }
}
const appStore = useAppStore()

// 渲染图表
const renderChart = () => {
  let series = props.yData.map((v) => {
    let T = {
      name: v.name,
      itemStyle: {
        color: v.startColor ? v.startColor : 'rgb(128, 255, 165)'
      },
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,

        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: v.startColor ? v.startColor : 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: v.endColor ? v.endColor : 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: v.data,
    }

    if (props.markline?.yaxis) {
      T.markLine = {
        label: { // 不显示基准线名称
          show: true,
          position: 'middle',
        },
        data: [
          {
            yAxis: props.markline.yaxis, // 自定义下限值
            name: '阈值', // 基准线名称
            label: { // 不显示基准线名称
              show: true,
              position: 'middle',
              formatter: props.markline.markLineName || '阈值',
            },
            lineStyle: {
              type: 'dashed', // 基准线样式为虚线
              color: props.markline.markLineColor || '#b17063',
            },
          },
        ],
      }
    }

    return T
  })
  let legendList = props.yData.map(v => {
    return v.name
  })


  let option = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    title: {
      text: props.yData.length > 1 ? '' : props.yData[0].name,
      subtext: props.subtext,
      textStyle: {
        fontFamily: 'LXGWZhiSongCL',
        fontSize: appStore.isMobile ? 14 : 18,
        // 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: legendList.length > 1 ? legendList : []
    },

    grid: {
      left: '0%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: props.xData
      }
    ],
    yAxis: [
      {
        type: 'value',
      }

    ],
    series: series
  };

  mChart.setOption(option)

}


onBeforeUnmount(() => {
  window.removeEventListener('resize', screenAdapter)
})

// 监听数据的变化，重新渲染图表
watch(
  () => props.yData,
  () => {
    renderChart()
  }
)
</script>

<style lang="scss" scoped></style>
